<template>
    <div class="sdy-home-banner">
        <van-swipe class="swiper-containner" 
        :autoplay="3000" 
        :duration="1000"
        indicator-color="red">
        <van-swipe-item
        v-for="item in bannerList"
        :key="item.bannerid">
    <van-image :src="item.img"></van-image>
    </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script setup lang="ts">
//导入响应的Api 请求功能函数
import { bannerListApi } from '@/api/banner';
//导入类型限制 
import type { MyBannerItem } from '@/config/interface'
import { ref, onMounted } from 'vue'
//提前准备一个数组，请求回来以后进行替换
//用该数组渲染页面
const bannerList = ref<MyBannerItem[]>([])
onMounted(async () => {
    const res = await bannerListApi()
    bannerList.value = res.data

})
</script>
<style scoped lang="scss">
@import '@/styles/variable.scss';

.sdy-home-banner {
    height: 180px;

    position: relative;
    box-sizing: border-box;
    padding: 15px;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: -50px;
        width: 100%;
        height: 100%;
        background-color: $globalColor;
        border-radius: 0 0 200px 200px / 0 0 40px 40px;
        z-index: -1;
    }

    >.swiper-containner {
        width: 100%;
        height: 100%;
        background-color: orange;
        border-radius: 10px;
        overflow: hidden;

    }
}
</style>